<template>
  <div class="goods-detail" v-if="DetailList.length != 0">
    <RollbackBarView :to="'/'" :title="'商品详情'" />
    <div class="goods-banner">
      <img :src="DetailList[0].img" alt="" />
    </div>
    <div class="goods-title">
      <p class="price line-ellipsis">{{ DetailList[0].price }}元</p>
      <p class="title two-line">{{ DetailList[0].title }}</p>
    </div>

    <div class="funbar">
      <router-link tag="div" to="/shoppingcar" class="car">
        <van-icon name="shopping-cart-o" />
        <span>购物车</span>
      </router-link>
      <div class="btn">
        <button @click="addGoods(DetailList[0].id, userId)">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsDetail } from "@/api/inedx";
import RollbackBarView from "@/components/RollbackBarView.vue";
export default {
  data() {
    return {
      DetailList: [],
      userId: "",
    };
  },
  methods: {
    getDetail() {
      return this.$http(getGoodsDetail(this.$route.params.id)).then(
        ({ data }) => {
          this.DetailList = data.data;
        }
      );
    },

    addGoods(val, id) {
      if (this.userId == "") {
        this.$toast("请先进行登录");
        return;
      }
      this.$http
        .post("http://192.168.27.59/addGoodsCar", {
          id: val,
          userId: id,
        })
        .then(({ data }) => {
          if (data.code == 300) {
            this.$toast(data.message);
          }
          this.$toast(data.message);
        });
    },
  },
  async mounted() {
    let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    if (userInfo) {
      this.userId = userInfo.userId == null ? "" : userInfo.userId;
    }
    await this.getDetail();
  },
  components: { RollbackBarView },
};
</script>

<style lang="scss" scoped>
.goods-detail {
  width: 100vw;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  .goods-banner {
    max-height: 90vmin;
    overflow: hidden;
    img {
      width: 100vw;
      min-height: 90vmin;
    }
  }
  .goods-title {
    width: 100vw;
    margin-top: 0.625rem;
    padding: 0.625rem 1.25rem;
    background-color: #fff;
    .price {
      font-size: 20px;
      color: red;
      line-height: 30px;
    }
    .title {
      width: 70vw;
      line-height: 18px;
    }
  }

  .funbar {
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0 10px;
    background-color: #fff;
    align-items: center;
    .car {
      font-size: 24px;
      padding: 10px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        font-size: 14px;
        display: inline-block;
        padding-top: 0.3125rem;
      }
    }
    .btn {
      button {
        width: 30vw;
        border: 0;
        height: 10vmin;
        border-radius: 1.25rem;
        background-color: rgb(7, 146, 25);
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>
